<template>
  <div class="user-info">
    <el-card>
      <div class="user-basic-info">
        <h2>用户信息</h2>
        <img :src="user.avatar" class="user-avatar" /> <!-- 用户头像 -->
        <p>用户名: {{ user.name }}</p>
        <p>电话: {{ user.call }}</p>
        <p>邮箱: {{ user.email }}</p>
      </div>
      <el-divider></el-divider>
      <div class="user-favorites">
        <h3>收藏的餐厅</h3>
        <el-row :gutter="20">
          <el-col :span="8" v-for="restaurant in user.favorites" :key="restaurant.name">
            <el-card class="restaurant-card">
              <img :src="restaurant.image" class="restaurant-image" /> <!-- 餐厅图片 -->
              <div class="restaurant-info">
                <h4>{{ restaurant.name }}</h4> <!-- 餐厅名称 -->
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <el-divider></el-divider>
      <div class="user-history">
        <h3>历史操作记录</h3>
        <el-timeline>
          <el-timeline-item
              v-for="(record, index) in user.history"
              :key="index"
              :timestamp="record.timestamp"
              placement="top">
            <el-card>
              <p>{{ record.action }}</p>
              <p v-if="record.actionType === 'comment'">{{ record.content }}</p>
              <p v-if="record.actionType === 'favorite'">{{ record.restaurantName }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: 'Zhang Xinyu',
        email: '999988777@qq.com',
        call:'12345678910',
        avatar: 'src/assets/user.jpg', // 用户头像路径
        favorites: [
          {
            name: '蟹堡王',
            image: 'src/assets/BurgerRestaurant.png'
          },
          {
            name: '维多披萨',
            image: 'src/assets/PizzaRestaurant.jpg'
          },
          // 更多收藏的餐厅...
        ],
        history: [
          // 历史操作记录
          { action: '评论了', actionType: 'comment', content: '维多披萨真不错！', timestamp: '2024-11-15', restaurantName: '美味餐厅' },
          { action: '收藏了', actionType: 'favorite', timestamp: '2024-11-14', restaurantName: '维多披萨' },
          // 更多历史记录...
        ]
      }
    }
  }
}
</script>

<style scoped>
.user-basic-info, .user-favorites, .user-history {
  margin-bottom: 20px;
}
.user-avatar {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%; /* 圆形头像 */
}
.restaurant-card {
  margin-bottom: 20px;
}
.restaurant-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
}
</style>